<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>kickstart-menus</title>
<link rel="stylesheet" type="text/css" href="kickstart-menus.css" />
</head>
<style>
    li[id]
    {
        display:inline-block;
        padding: 7px;
        border-bottom-color: transparent;
        border-bottom-width: 3px;
        border-bottom-style: solid;
        color: #ffffff;
    }
    a[id]
    {  text-decoration: none;
        color: #ffffff;
    }
    a[id]:hover
    {
        transition: all 0.3s ease;
        transform: rotate(5deg);
        color:#FF9;
    }
    li[id]:hover
    {
        border-bottom-color: red;
        border-bottom-width: 3px;
        border-bottom-style: solid;
        transition: all 0.3s ease;
        transform: translateX(20);
    }
    ul[id]
    {
        background-color: rgba(0, 0, 0, 0.65);
        border-radius: 5px;
        border: solid 1px #c6c6c6;
        margin-top: 20px;
        width: 100%;
    }
    .traniangle
    { border-bottom-width: 5px;
        border-right-width: 15px;
        border-top-width: 13px;
        border-left-width: 15px;
        width: 0px;
        height: 0px;
        border-style:solid solid solid solid;
        border-color: #ff6308 transparent transparent transparent ;
    }
</style>
<body style="font-family:'Comic Sans MS', cursive; color:#343434; font-size:18px;">
<div>
    <ul id>
        <li id ><a id style="color: #ff9c10;" href="kickstart%20introduce%20.html">HTML Kickstart</a></li>
        <label class="traniangle"><li id><a id href="table.html">table</a></li></label> <!--  class="active"-->
        <label class="traniangle"><li id><a id href="menus.html">menus</a></li></label>
        <label class="traniangle"><li id><a id href="button.html">button</a></li></label>
        <label class="traniangle"><li id><a  id href="kickstart forms-style.html">forms</a></li></label>
    </ul>
</div>
<div style=" margin-top:50px;">
<table  align="center" cellpadding="20px">
<tr>
<td colspan="2"  align="center" style="font-size:28px; ">HTML kickstart-menus style</td>
</tr>
<tr>
    <td>
    <ul class="menu vertical" style="width:300px;">
        <li class="current-blue"><a href="">Item 1</a></li>
        <li><a href="">Item 2</a></li>
        <li><a href="">Item 3</a></li>
        <li><a href="">Item 4</a></li>
    </ul>
        <details>
            <summary>    <br/>
                class:menu vertical;<br/>
                class:current-blue;<br/>
            </summary>
            <textarea  style="width: 200px; height: 100px;">
                  .menu{margin:0;padding:0;line-height:100%;
        font-size:0; /* Kill white space gap between LI elements */
        position:relative;z-index:1000;}

    .menu:after{clear:both;content:' ';display:block;font-size:0;line-height:0;visibility:hidden;width:0;height:0}
    .menu li{margin:0;padding:0;list-style-type:none;display:inline-block;*display:inline;position:relative;zoom:1;line-height:inherit;
        top:0;left:0;font-size:16px; /* fixed font-size to replace font-size:0 in parent .menu 1em/16px default */}
    .menu li a{margin:0;padding:0;display:block;display:inline;display:inline-block;position:relative;zoom:1;line-height:100%;top:0;left:0;}
    /*--------------Sub Menus-------------------*/
    /*.menu li:hover > ul{display:block;}*/
    .menu ul{margin:0;padding:0;position: absolute;top:100%;left:0;display:none;min-width:150px;max-width:150%;*width:150px;}
    .menu ul li{display:block;width:100%;}
    .menu ul li a{display:block;}
    .menu ul ul{top:0;left:100%;}

    .menu.vertical{}
    .menu.vertical li{display:block;}
    .menu.vertical li a{display:block;}
    .menu.vertical ul{top:0;left:100%;}
    .menu.vertical li.has-menu span.arrow{margin-top:-4px;}
    .menu{
        border:1px solid #ccc;
        background: #eee; /* Old browsers */
        background: -moz-linear-gradient(top, rgba(252,252,252,1) 0%, rgba(224,224,224,1) 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(252,252,252,1)), color-stop(100%,rgba(224,224,224,1))); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(224,224,224,1) 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(224,224,224,1) 100%); /* Opera11.10+ */
        background: linear-gradient(top, rgba(252,252,252,1) 0%,rgba(224,224,224,1) 100%); /* W3C */
        z-index:600;
    }
    .menu li{}

    .menu li a{
        text-shadow:0px 1px 1px #fff;
        padding:15px 20px;
        text-decoration:none;
        font-size:0.9em;
        color: #777;
    }
    .menu li.current-blue>a,
    .menu li.current-blue>a:hover,
    .menu li.current-blue.hover>a{
        background: rgb(122,188,255); /* Old browsers */
        background: -moz-linear-gradient(top, rgba(122,188,255,1) 0%, rgba(96,171,248,1) 44%, rgba(64,150,238,1) 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(122,188,255,1)), color-stop(44%,rgba(96,171,248,1)), color-stop(100%,rgba(64,150,238,1))); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, rgba(122,188,255,1) 0%,rgba(96,171,248,1) 44%,rgba(64,150,238,1) 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, rgba(122,188,255,1) 0%,rgba(96,171,248,1) 44%,rgba(64,150,238,1) 100%); /* Opera11.10+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7abcff', endColorstr='#4096ee',GradientType=0 ); /* IE6-9 */
        background: linear-gradient(top, rgba(122,188,255,1) 0%,rgba(96,171,248,1) 44%,rgba(64,150,238,1) 100%); /* W3C */
        color:#fff;
        text-shadow:0px -1px 0 rgba(0,0,0,0.2);
        cursor: default;
    }
    .menu li a:hover,
    .menu li.hover>a{
        background: #ff7813;
        color: #ffffff;
    }
            </textarea>
        </details>
    </td>
    <td>
    <ul class="menu vertical right" style="width:300px;">
        <li><a href="">Item 1</a></li>
        <li><a href="">Item 2</a></li>
        <li><a href="">Item 3</a></li>
        <li><a href="">Item 4</a></li>
    </ul>
    <br/>
 <details>
            <summary>    <br/>
                class:menu vertical;<br/>
            </summary>
            <textarea  style="width: 200px; height: 100px;">
  .menu{margin:0;padding:0;line-height:100%;
        font-size:0; /* Kill white space gap between LI elements */
        position:relative;z-index:1000;}

    .menu:after{clear:both;content:' ';display:block;font-size:0;line-height:0;visibility:hidden;width:0;height:0}
    .menu li{margin:0;padding:0;list-style-type:none;display:inline-block;*display:inline;position:relative;zoom:1;line-height:inherit;
        top:0;left:0;font-size:16px; /* fixed font-size to replace font-size:0 in parent .menu 1em/16px default */}
    .menu li a{margin:0;padding:0;display:block;display:inline;display:inline-block;position:relative;zoom:1;line-height:100%;top:0;left:0;}
    /*--------------Sub Menus-------------------*/
    /*.menu li:hover > ul{display:block;}*/
    .menu ul{margin:0;padding:0;position: absolute;top:100%;left:0;display:none;min-width:150px;max-width:150%;*width:150px;}
    .menu ul li{display:block;width:100%;}
    .menu ul li a{display:block;}
    .menu ul ul{top:0;left:100%;}

    .menu.vertical{}
    .menu.vertical li{display:block;}
    .menu.vertical li a{display:block;}
    .menu.vertical ul{top:0;left:100%;}
    .menu.vertical li.has-menu span.arrow{margin-top:-4px;}
    .menu{
        border:1px solid #ccc;
        background: #eee; /* Old browsers */
        background: -moz-linear-gradient(top, rgba(252,252,252,1) 0%, rgba(224,224,224,1) 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(252,252,252,1)), color-stop(100%,rgba(224,224,224,1))); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(224,224,224,1) 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(224,224,224,1) 100%); /* Opera11.10+ */
        background: linear-gradient(top, rgba(252,252,252,1) 0%,rgba(224,224,224,1) 100%); /* W3C */
        z-index:600;
    }
    .menu li{}

    .menu li a{
        text-shadow:0px 1px 1px #fff;
        padding:15px 20px;
        text-decoration:none;
        font-size:0.9em;
        color: #777;
    }
    .menu li a:hover,
    .menu li.hover>a{
        background: #ff7813;
        color: #ffffff;
    }
            </textarea>
        </details>

    </td>
</tr>
<tr>
    <td colspan="2">
    <ul class="menu" style="width:800px;">
        <li class="current-blue"><a href="">Item 1</a></li>
        <li><a href="">Item 2</a></li>
        <li><a href=""><i class="fa fa-inbox">Item </i> Item 3</a>
        <li><a href=""><i class="fa fa-trash">Item </i> Item 4</a></li>
        <li><a href="">Item 5</a></li>
    </ul>
        <br/>
        <details>
            <summary>    <br/>
                class:menu;<br/>
                class:current-blue;<br/>
            </summary>
            <textarea  style="width: 200px; height: 100px;">
        .menu{margin:0;padding:0;line-height:100%;
        font-size:0; /* Kill white space gap between LI elements */
        position:relative;z-index:1000;}
    .menu:after{clear:both;content:' ';display:block;font-size:0;line-height:0;visibility:hidden;width:0;height:0}
    .menu li{margin:0;padding:0;list-style-type:none;display:inline-block;*display:inline;position:relative;zoom:1;line-height:inherit;
        top:0;left:0;font-size:16px; /* fixed font-size to replace font-size:0 in parent .menu 1em/16px default */}
    .menu li a{margin:0;padding:0;display:block;display:inline;display:inline-block;position:relative;zoom:1;line-height:100%;top:0;left:0;}
    /*--------------Sub Menus-------------------*/
    /*.menu li:hover > ul{display:block;}*/
    .menu{
        border:1px solid #ccc;
        background: #eee; /* Old browsers */
        background: -moz-linear-gradient(top, rgba(252,252,252,1) 0%, rgba(224,224,224,1) 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(252,252,252,1)), color-stop(100%,rgba(224,224,224,1))); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(224,224,224,1) 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(224,224,224,1) 100%); /* Opera11.10+ */
        background: linear-gradient(top, rgba(252,252,252,1) 0%,rgba(224,224,224,1) 100%); /* W3C */
        z-index:600;

    }
    .menu li a{
        text-shadow:0px 1px 1px #fff;
        padding:15px 20px;
        text-decoration:none;
        font-size:0.9em;
        color: #777;

    }
    .menu li.current-blue>a,
    .menu li.current-blue>a:hover,
    .menu li.current-blue.hover>a{
        background: rgb(122,188,255); /* Old browsers */
        background: -moz-linear-gradient(top, rgba(122,188,255,1) 0%, rgba(96,171,248,1) 44%, rgba(64,150,238,1) 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(122,188,255,1)), color-stop(44%,rgba(96,171,248,1)), color-stop(100%,rgba(64,150,238,1))); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, rgba(122,188,255,1) 0%,rgba(96,171,248,1) 44%,rgba(64,150,238,1) 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, rgba(122,188,255,1) 0%,rgba(96,171,248,1) 44%,rgba(64,150,238,1) 100%); /* Opera11.10+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7abcff', endColorstr='#4096ee',GradientType=0 ); /* IE6-9 */
        background: linear-gradient(top, rgba(122,188,255,1) 0%,rgba(96,171,248,1) 44%,rgba(64,150,238,1) 100%); /* W3C */
        color:#fff;
        text-shadow:0px -1px 0 rgba(0,0,0,0.2);
        cursor: default;
    }
    .menu li a:hover,
    .menu li.hover>a{
        background: #ff7813;
        color: #ffffff;
    }
            </textarea>
        </details>

    </td>
</tr>
<tr>
        <td colspan="2">
            <ul class="menu" style="width:800px;">
                <li class="current-orange"><a href="">Item 1</a></li>
                <li><a href="">Item 2</a></li>
                <li><a href="">Item 3</a>
                <li><a href="">Item 4</a></li>
                <li><a href="">Item 5</a></li>
            </ul>
            <br/>
            <details>
                <summary>    <br/>
                    class:menu;<br/>
                    class:current-orange;<br/>
                </summary>
            <textarea  style="width: 200px; height: 100px;">
                 .menu{margin:0;padding:0;line-height:100%;
        font-size:0; /* Kill white space gap between LI elements */
        position:relative;z-index:1000;}
    .menu:after{clear:both;content:' ';display:block;font-size:0;line-height:0;visibility:hidden;width:0;height:0}
    .menu li{margin:0;padding:0;list-style-type:none;display:inline-block;*display:inline;position:relative;zoom:1;line-height:inherit;
        top:0;left:0;font-size:16px; /* fixed font-size to replace font-size:0 in parent .menu 1em/16px default */}
    .menu li a{margin:0;padding:0;display:block;display:inline;display:inline-block;position:relative;zoom:1;line-height:100%;top:0;left:0;}
    /*--------------Sub Menus-------------------*/
    /*.menu li:hover > ul{display:block;}*/
    .menu{
        border:1px solid #ccc;
        background: #eee; /* Old browsers */
        background: -moz-linear-gradient(top, rgba(252,252,252,1) 0%, rgba(224,224,224,1) 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(252,252,252,1)), color-stop(100%,rgba(224,224,224,1))); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(224,224,224,1) 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(224,224,224,1) 100%); /* Opera11.10+ */
        background: linear-gradient(top, rgba(252,252,252,1) 0%,rgba(224,224,224,1) 100%); /* W3C */
        z-index:600;

    }
    .menu li a{
        text-shadow:0px 1px 1px #fff;
        padding:15px 20px;
        text-decoration:none;
        font-size:0.9em;
        color: #777;

    }
    .menu li.current-orange>a,
    .menu li.current-orange>a:hover,
    .menu li.current-orange.hover>a{
        background: rgb(255, 183, 0); /* Old browsers */
        background: -moz-linear-gradient(top, rgb(255, 204, 0) 0%, rgb(255, 183, 0) 44%, rgb(255, 167, 0) 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgb(255, 204, 0)), color-stop(44%, rgb(255, 183, 0)), color-stop(100%, rgb(255, 167, 0))); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, rgb(255, 204, 0) 0%, rgb(255, 183, 0) 44%, rgb(255, 167, 0) 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, rgb(255, 204, 0) 0%, rgb(255, 183, 0) 44%, rgb(255, 167, 0) 100%); /* Opera11.10+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7abcff', endColorstr='#4096ee',GradientType=0 ); /* IE6-9 */
        background: linear-gradient(top, rgb(255, 204, 0) 0%, rgb(255, 183, 0) 44%, rgb(255, 167, 0) 100%); /* W3C */
        color:#fff;
        text-shadow:0px -1px 0 rgba(0,0,0,0.2);
        cursor: default;
    }
    .menu li a:hover,
    .menu li.hover>a{
        background: #ff7813;
        color: #ffffff;
    }
            </textarea>
            </details>

        </td>
</tr>
    <tr>
        <td colspan="2">
            <ul class="menu" style="width:800px;">
                <li class="current-gray"><a href="">Item 1</a></li>
                <li><a href="">Item 2</a></li>
                <li><a href=""><i class="fa fa-inbox">12</i> Item 3</a>
                <li><a href=""><i class="fa fa-trash">12</i>Item 4</a></li>
                <li><a href="">Item 5</a></li>
            </ul>
            <br/>
            <details>
                <summary>    <br/>
                    class:menu;<br/>
                    class:current-gray;<br/>
                </summary>
            <textarea  style="width: 200px; height: 100px;">
                    .menu{margin:0;padding:0;line-height:100%;
        font-size:0; /* Kill white space gap between LI elements */
        position:relative;z-index:1000;}
    .menu:after{clear:both;content:' ';display:block;font-size:0;line-height:0;visibility:hidden;width:0;height:0}
    .menu li{margin:0;padding:0;list-style-type:none;display:inline-block;*display:inline;position:relative;zoom:1;line-height:inherit;
        top:0;left:0;font-size:16px; /* fixed font-size to replace font-size:0 in parent .menu 1em/16px default */}
    .menu li a{margin:0;padding:0;display:block;display:inline;display:inline-block;position:relative;zoom:1;line-height:100%;top:0;left:0;}
    /*--------------Sub Menus-------------------*/
    /*.menu li:hover > ul{display:block;}*/
    .menu{
        border:1px solid #ccc;
        background: #eee; /* Old browsers */
        background: -moz-linear-gradient(top, rgba(252,252,252,1) 0%, rgba(224,224,224,1) 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(252,252,252,1)), color-stop(100%,rgba(224,224,224,1))); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(224,224,224,1) 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(224,224,224,1) 100%); /* Opera11.10+ */
        background: linear-gradient(top, rgba(252,252,252,1) 0%,rgba(224,224,224,1) 100%); /* W3C */
        z-index:600;

    }
    .menu li a{
        text-shadow:0px 1px 1px #fff;
        padding:15px 20px;
        text-decoration:none;
        font-size:0.9em;
        color: #777;

    }

    .menu li.current-gray>a,
    .menu li.current-gray>a:hover,
    .menu li.current-gray.hover>a{
        background: rgb(165, 181, 187); /* Old browsers */
        background: -moz-linear-gradient(top, rgb(178, 201, 200) 0%, rgb(165, 181, 187) 44%, rgb(155, 171, 177) 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgb(178, 201, 200)), color-stop(44%, rgb(155, 171, 177)), color-stop(100%, rgb(165, 181, 187))); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, rgb(178, 201, 200) 0%, rgb(165, 181, 187) 44%, rgb(155, 171, 177) 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, rgb(178, 201, 200) 0%, rgb(165, 181, 187) 44%, rgb(155, 171, 177) 100%); /* Opera11.10+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7abcff', endColorstr='#4096ee',GradientType=0 ); /* IE6-9 */
        background: linear-gradient(top, rgb(178, 201, 200) 0%, rgb(165, 181, 187) 44%, rgb(155, 171, 177) 100%); /* W3C */
        color:#fff;
        text-shadow:0px -1px 0 rgba(0,0,0,0.2);
        cursor: default;
    }
    .menu li a:hover,
    .menu li.hover>a{
        background: #ff7813;
        color: #ffffff;
    }
            </textarea>
            </details>
        </td>
    </tr>
    <tr>
        <td colspan="2">
            <ul class="menu" style="width:800px;">
                <li class="current-green"><a href="">Item 1</a></li>
                <li><a href="">Item 2</a></li>
                <li><a href=""><i class="fa fa-inbox">12</i> Item 3</a>
                <li><a href=""><i class="fa fa-trash">12</i> li.divider</a></li>
                <li><a href="">Item 4</a></li>
            </ul>
            <br/>
            <details>
                <summary>    <br/>
                    class:menu;<br/>
                    class:current-green;<br/>
                </summary>
            <textarea  style="width: 200px; height: 100px;">
 .menu{margin:0;padding:0;line-height:100%;
        font-size:0; /* Kill white space gap between LI elements */
        position:relative;z-index:1000;}
    .menu:after{clear:both;content:' ';display:block;font-size:0;line-height:0;visibility:hidden;width:0;height:0}
    .menu li{margin:0;padding:0;list-style-type:none;display:inline-block;*display:inline;position:relative;zoom:1;line-height:inherit;
        top:0;left:0;font-size:16px; /* fixed font-size to replace font-size:0 in parent .menu 1em/16px default */}
    .menu li a{margin:0;padding:0;display:block;display:inline;display:inline-block;position:relative;zoom:1;line-height:100%;top:0;left:0;}
    /*--------------Sub Menus-------------------*/
    /*.menu li:hover > ul{display:block;}*/
    .menu{
        border:1px solid #ccc;
        background: #eee; /* Old browsers */
        background: -moz-linear-gradient(top, rgba(252,252,252,1) 0%, rgba(224,224,224,1) 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(252,252,252,1)), color-stop(100%,rgba(224,224,224,1))); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(224,224,224,1) 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(224,224,224,1) 100%); /* Opera11.10+ */
        background: linear-gradient(top, rgba(252,252,252,1) 0%,rgba(224,224,224,1) 100%); /* W3C */
        z-index:600;

    }
    .menu li a{
        text-shadow:0px 1px 1px #fff;
        padding:15px 20px;
        text-decoration:none;
        font-size:0.9em;
        color: #777;

    }

    .menu li.current-green>a,
    .menu li.current-green>a:hover,
    .menu li.current-green.hover>a{
        background: rgb(215, 255, 0); /* Old browsers */
        background: -moz-linear-gradient(top, rgb(220, 255, 0) 0%, rgb(205, 255, 0) 44%, rgb(193, 255, 0) 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgb(220, 255, 0)), color-stop(44%, rgb(205, 255, 0)), color-stop(100%, rgb(193, 255, 0))); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, rgb(220, 255, 0) 0%, rgb(205, 255, 0) 44%, rgb(193, 255, 0) 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, rgb(220, 255, 0) 0%, rgb(205, 255, 0) 44%, rgb(193, 255, 0) 100%); /* Opera11.10+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7abcff', endColorstr='#4096ee',GradientType=0 ); /* IE6-9 */
        background: linear-gradient(top, rgb(220, 255, 0) 0%, rgb(205, 255, 0) 44%, rgb(193, 255, 0) 100%); /* W3C */
        color: #343434;
        text-shadow:0px -1px 0 rgba(0,0,0,0.2);
        cursor: default;
    }
    .menu li a:hover,
    .menu li.hover>a{
        background: #ff7813;
        color: #ffffff;
    }
            </textarea>
            </details>

        </td>
    </tr>
    <tr>
        <td colspan="2">
            <ul class="menu" style="width:800px;">
                <li style="border-left: solid 7px #9d977b; margin-left: 10px;"><a href="">Item 1</a></li>
                <li style="border-left: solid 7px #9d977b; margin-left: 10px;"><a href="">Item 2</a></li>
                <li style="border-left: solid 7px #9d977b; margin-left: 10px;"><a href="">Item 3</a>
                <li style="border-left: solid 7px #9d977b; margin-left: 10px;"><a href="">Item 4</a></li>
                <li style="border-left: solid 7px #9d977b; margin-left: 10px;"><a href="">Item 5</a></li>
            </ul>
            <br/>
            <details>
                <summary><br/>
                    class:menu;<br/>
                    style;<br/>
                </summary>
            <textarea  style="width: 200px; height: 100px;">
 .menu{margin:0;padding:0;line-height:100%;
        font-size:0; /* Kill white space gap between LI elements */
        position:relative;z-index:1000;}
    .menu:after{clear:both;content:' ';display:block;font-size:0;line-height:0;visibility:hidden;width:0;height:0}
    .menu li{margin:0;padding:0;list-style-type:none;display:inline-block;*display:inline;position:relative;zoom:1;line-height:inherit;
        top:0;left:0;font-size:16px; /* fixed font-size to replace font-size:0 in parent .menu 1em/16px default */}
    .menu li a{margin:0;padding:0;display:block;display:inline;display:inline-block;position:relative;zoom:1;line-height:100%;top:0;left:0;}
    /*--------------Sub Menus-------------------*/
    /*.menu li:hover > ul{display:block;}*/
    .menu{
        border:1px solid #ccc;
        background: #eee; /* Old browsers */
        background: -moz-linear-gradient(top, rgba(252,252,252,1) 0%, rgba(224,224,224,1) 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(252,252,252,1)), color-stop(100%,rgba(224,224,224,1))); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(224,224,224,1) 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(224,224,224,1) 100%); /* Opera11.10+ */
        background: linear-gradient(top, rgba(252,252,252,1) 0%,rgba(224,224,224,1) 100%); /* W3C */
        z-index:600;

    }
    .menu li a{
        text-shadow:0px 1px 1px #fff;
        padding:15px 20px;
        text-decoration:none;
        font-size:0.9em;
        color: #777;

    }
    .menu li a:hover,
    .menu li.hover>a{
        background: #ff7813;
        color: #ffffff;
    }
<ul class="menu" style="width:800px;">
    <li style="border-left: solid 7px #9d977b; margin-left: 10px;"><a href="">Item 1</a></li>
    <li style="border-left: solid 7px #9d977b; margin-left: 10px;"><a href="">Item 2</a></li>
    <li style="border-left: solid 7px #9d977b; margin-left: 10px;"><a href="">Item 3</a>
    <li style="border-left: solid 7px #9d977b; margin-left: 10px;"><a href="">Item 4</a></li>
    <li style="border-left: solid 7px #9d977b; margin-left: 10px;"><a href="">Item 5</a></li>
</ul>

            </textarea>
            </details>

        </td>
    </tr>
</table>
<hr width="70%" size="5" color="#343434"/>
<div style=" text-align:center; font-size:18px;">Welcome to join in the “二班Open Source”</div>
</div>
</body>
</html>
